package cn.mujiankeji.mbrowser.界面.框架.主视图

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import cn.mujiankeji.mbrowser.app.界面模块
import cn.mujiankeji.mbrowser.界面.图标.MyIconPack
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.主页
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.刷新
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.前进
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.后退
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.菜单
import org.koin.compose.koinInject

/**
 * 手势导航按钮数据
 */
data class 手势导航按钮(
    val 图标: ImageVector,
    val 执行: () -> Unit,
    val 文本: String = "",
    val 启用: Boolean = true
)

/**
 * 手势导航工具栏，处理从底部工具栏向上滑动时显示的导航菜单
 * 
 * @param 界面模块 界面模块实例
 * @param 布局类型 手势导航布局类型
 * @param 显示 是否显示手势导航
 * @param 触摸状态 是否处于触摸状态（用户手指仍在屏幕上）
 * @param 当前触摸位置 当前触摸位置
 * @param 按钮列表 自定义按钮列表，为空时使用默认按钮
 * @param onDismissRequest 关闭手势导航的回调
 * @param onButtonSelected 按钮被选中并触发时的回调
 */
@Composable
fun 手势导航(
    界面模块: 界面模块 = koinInject(),
    显示: Boolean = false,
    触摸状态: Boolean = false, // 是否处于触摸状态（用户手指仍在屏幕上）
    当前触摸位置: Offset = Offset.Zero, // 当前触摸位置
    按钮列表: List<手势导航按钮> = emptyList(),
    onDismissRequest: () -> Unit = {}
) {
    val 按钮集合 = if (按钮列表.isNotEmpty()) 按钮列表 else remember {
        listOf(
            手势导航按钮(
                图标 = MyIconPack.后退,
                执行 = { 界面模块.后退() },
                文本 = "后退",
            ),
            手势导航按钮(
                图标 = MyIconPack.主页,
                执行 = { /* 跳转到主页 */ },
                文本 = "主页"
            ),
            手势导航按钮(
                图标 = MyIconPack.刷新,
                执行 = { 界面模块.刷新() },
                文本 = "刷新"
            ),

            手势导航按钮(
                图标 = MyIconPack.菜单,
                执行 = { 界面模块.显示菜单 = true },
                文本 = "菜单"
            ),
            手势导航按钮(
                图标 = MyIconPack.前进,
                执行 = { 界面模块.前进() },
                文本 = "前进",
            )
        )
    }
    
    val 密度 = LocalDensity.current
    val 屏幕宽度 = with(密度) { LocalConfiguration.current.screenWidthDp.dp.toPx() }
    
    // 选中的按钮索引，0表示未选中任何按钮
    var 选中按钮索引 by remember { mutableStateOf(0) }
    
    // 按钮布局宽度
    val density = LocalDensity.current
    var 布局宽度 by remember { mutableStateOf(0f) }
    var 布局高度 by remember { mutableStateOf(0f) }
    val 底部空白 = remember { with(density){30.dp.toPx()} }

    // 按钮实际位置信息
    val 按钮尺寸 = remember { with(density){50.dp.toPx()} } // 按钮尺寸（直径）
    
    // 内部跟踪的触摸位置（可变）
    var 内部触摸位置 by remember { mutableStateOf(当前触摸位置) }


    
    // 当外部传入的触摸位置更新时，同步到内部状态
    LaunchedEffect(当前触摸位置) {
        内部触摸位置 = 当前触摸位置.copy(y = 当前触摸位置.y + 底部空白)
    }

    
    // 更新选中按钮索引（根据触摸位置）
    LaunchedEffect(内部触摸位置, 布局宽度, 触摸状态) {
        if (触摸状态 && 布局宽度 > 0) {
            val x = 内部触摸位置.x
            val y = 内部触摸位置.y

            // 太低直接不算入
            if (y > -0 || y < -底部空白 - 布局高度) {
                选中按钮索引 = 0
                return@LaunchedEffect
            }

            // 计算触摸点到每个按钮中心的距离
            var 最近按钮索引 = 0

            var 最小距离 = Float.MAX_VALUE

            // 根据X判定触摸点属于哪个按钮
            // 按钮在水平方向均匀分布，计算每个按钮的中心点
            val 按钮数量 = 按钮集合.size
            if (按钮数量 > 0) {
                val 按钮间距 = 布局宽度 / (按钮数量 + 1)
                for (i in 1..按钮数量) {
                    val 按钮中心x = 按钮间距 * i
                    val 距离 = kotlin.math.abs(x - 按钮中心x)
                    if (距离 < 最小距离) {
                        最小距离 = 距离
                        最近按钮索引 = i
                    }
                }
            }

            // 根据位置 Y 确定高度
            when(最近按钮索引){
                1,5 -> if (y < -按钮尺寸) 最近按钮索引 = 0 // 超出高度
                2,3,4 -> if (y > -按钮尺寸 / 2) 最近按钮索引 = 0 // 未到高度
            }

            选中按钮索引 = 最近按钮索引
        }
        else if (!触摸状态) {
            // 如果不是触摸状态（手指抬起），通知选中的按钮并重置选中状态
            if (选中按钮索引 > 0 && 选中按钮索引 <= 按钮集合.size) {
                val 按钮 = 按钮集合[选中按钮索引 - 1]
                按钮.执行()
            }
            选中按钮索引 = 0
            // 松手后自动关闭手势导航
            onDismissRequest()
        }
    }
    
    // 手势导航覆盖层（悬浮在内容之上）
    Box(
        modifier = Modifier
            .fillMaxSize()
            .zIndex(10f) // 确保显示在最上层
    ) {
        // 半透明背景遮罩
        AnimatedVisibility(
            visible = 显示,
            enter = fadeIn(animationSpec = tween(durationMillis = 200)),
            exit = fadeOut(animationSpec = tween(durationMillis = 150))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black.copy(alpha = 0.4f))
                    .pointerInput(Unit) {
                        detectTapGestures {
                            // 点击背景时关闭导航菜单
                            onDismissRequest()
                        }
                    }
            )
        }
        
        // 导航菜单
        AnimatedVisibility(
            visible = 显示,
            enter = slideInVertically(
                initialOffsetY = { it / 2 },
                animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing)
            ),
            exit = slideOutVertically(
                targetOffsetY = { it / 2 },
                animationSpec = tween(durationMillis = 150)
            ),
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 30.dp) // 自身再padding
                    .onGloballyPositioned { 
                        布局宽度 = it.size.width.toFloat()
                        布局高度 = it.size.height.toFloat()

                    }
            ) {
                按钮列表(按钮集合, 选中按钮索引) { /* 仅显示选中效果，不执行操作 */ }
            }
        }
    }
}

@Composable
private fun 按钮列表(
    按钮集合: List<手势导航按钮>,
    选中按钮索引: Int,
    onSelect: (Int) -> Unit
) {
    if (按钮集合.size < 5) return
    Row(
        modifier = Modifier.fillMaxWidth()
            .height(180.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        for (pos in 0 until 5) {
            Column(Modifier
                .fillMaxHeight()
                .weight(1f)
                .padding(horizontal = 5.dp),
                verticalArrangement = if (pos == 0 || pos == 4) Arrangement.Bottom
                else if (pos == 2) Arrangement.Top
                else Arrangement.Center) {
                导航按钮(
                    图标 = 按钮集合[pos].图标,
                    文本 = 按钮集合[pos].文本,
                    选中 = 选中按钮索引 == pos + 1,
                    启用 = 按钮集合[pos].启用,
                    索引 = pos + 1,
                    onSelect = onSelect
                )
            }
        }
    }
}

@Composable
private fun 导航按钮(
    图标: ImageVector,
    文本: String,
    选中: Boolean,
    启用: Boolean,
    索引: Int,
    onSelect: (Int) -> Unit
) {
    val 选中动画 by animateFloatAsState(
        targetValue = if (选中) 1.2f else 1f,
        animationSpec = tween(durationMillis = 200)
    )
    
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(8.dp)
    ) {
        Box(
            modifier = Modifier
                .size(48.dp)
                .graphicsLayer {
                    scaleX = 选中动画
                    scaleY = 选中动画
                }
                .clip(CircleShape)
                .background(Color.DarkGray)
        ) {
            Icon(
                imageVector = 图标,
                contentDescription = 文本,
                tint = if (启用) Color.White else Color.Gray,
                modifier = Modifier
                    .align(Alignment.Center)
                    .size(24.dp)
            )
            
            // 选中指示点
            if (选中) {
                Box(
                    modifier = Modifier
                        .size(8.dp)
                        .align(Alignment.BottomCenter)
                        .offset(y = (-4).dp)
                        .clip(CircleShape)
                        .background(Color.Cyan)
                )
            }
        }
        
        if (文本.isNotEmpty()) {
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = 文本,
                style = MaterialTheme.typography.bodySmall,
                color = if (启用) Color.White else Color.Gray
            )
        }
    }
} 